<template>
  <div class="table">
      <ul class="thInner tr">
          <li class="th td" v-for="(item,index) in tableData.thList" :key="index" v-text="item"></li>
      </ul>
      <ul class="tdInner tr" v-for="(item,index) in tableData.tdList" :key="index"> 
          <li class="td" v-for="(el,key) in item" :key="key">{{el}}</li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'tableBar',
  data () {
    return {
        tableStyle:{
            
        },
        test:{
            type:'申请额度',
            ends:'拒绝',
            date:'2018-02-03 21:00:22',
            id:'41375358621624',
            name:'杨金金',
            mobile:'13621972232',
            address:'江苏昆山'
        },
        tableData:{
            thList:['事件类型','事件结果','事件时间','关联单号','姓名','手机号码','定位位置'],
            tdList:[
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
                {
                    type:'申请额度',
                    ends:'拒绝',
                    date:'2018-02-03 21:00:22',
                    id:'41375358621624',
                    name:'杨金金',
                    mobile:'13621972232',
                    address:'江苏昆山'
                },
            ]
        }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .table {
        width: 100%;
        /* background: #eeeeee; */
        border: 1px solid #e3e7ee;
        border-right: none;
        border-left: none;
    }

    .table .tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        font-size: 12px; 
        border-bottom: 1px solid #e3e7ee;       
    }

    .table .tr:last-of-type {
        border: none;
    }

    .table .tr .td {
        display: flex;
        height: 40px;
        justify-content: center;
        align-items: center;
        border-right:1px solid #e3e7ee;
        width: 100%;
    }

    .table .tr .td:last-of-type{
        border: none;
    }
</style>
